<template>
  <div class="body-container">
    <div class="back-button" @click="goBack">
      <i class="fa fa-arrow-left"></i>
      返回
    </div>
    <div class="title-section">
      <h1 class="main-title">中国茶文化</h1>
    </div>
    <div class="content-container">
      <div class="tea-history-container">
        <h2 class="subtitle">茶历史</h2>
        <canvas id="tea-history-timeline" width="200" height="600"></canvas>
      </div>
      <div class="tea-list-container">
        <h2 class="subtitle">九大名茶</h2>
        <div class="tea-cards-wrapper">
          <div class="tea-card" v-for="tea in teas" :key="tea.name">
            <div class="tea-header">
              <h3>{{ tea.name }}</h3>
              <div class="tea-poem">{{ tea.poem }}</div>
            </div>
            <div class="tea-content">
              <p>{{ tea.description }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="tea-categories-container">
        <h2 class="subtitle">茶类分类</h2>
        <div class="category-list">
          <div class="category-item" v-for="category in basicCategories" :key="category">
            {{ category }}
          </div>
          <div class="category-item" v-for="category in processedCategories" :key="category.name">
            <div>{{ category.name }}</div>
            <div class="sub-items">{{ category.examples }}</div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'TeaApp',
  data() {
    return {
      basicCategories: ['绿茶', '白茶', '黄茶', '青茶', '红茶', '黑茶'],
      processedCategories: [
        { name: '花茶', examples: '代表品种：茉莉花茶、桂花乌龙等' },
        { name: '紧压茶', examples: '代表品种：沱茶、饼茶等' },
        { name: '萃取茶', examples: '代表品种：速溶茶、浓缩茶等' },
        { name: '果味茶', examples: '代表品种：柠檬红茶、荔枝红茶等' }
      ],
      teas: [
        {
          name: '君山银针',
          poem: '雾气袅袅舞白鹤，天赐茶树绕玉香',
          description: '主要产于湖南岳阳福越湖的青山上，在清代曾分为"尖茶"和"青茶"两种，以色香味形俱佳而著称。'
        },
        {
          name: '西湖龙井',
          poem: '西子湖畔若兰香，色艳高香冠群芳',
          description: '主要产于浙江杭州西湖的群山中，其具有芽芽直立的形态、清富馥郁的若兰香气与清澈奇特的汤色，被誉为中国第一大名茶。'
        },
        {
          name: '祁门红茶',
          poem: '茶韵文脉焕新颖，彩绘经纬展茗香',
          description: '主要产于安徽祁门一带，由于品质超群，被誉为"红茶皇后"。'
        },
        {
          name: '洞庭碧螺春',
          poem: '太湖佳茗似佳人',
          description: '产于苏州市太湖的洞庭东、西山，天然形意呈蝶状，白毫碧绿，以香高、汤浓、味醇而各具特色。'
        },
        {
          name: '安溪铁观音',
          poem: '云蒸雾绕育醇香',
          description: '主要产于福建省戴云山，其茶香高韵长、醇厚甘鲜，品质超凡，跻身于世界十大名茶之列。'
        },
        {
          name: '庐山云雾',
          poem: '秀甲江南冠天下',
          description: '主要产于江西省九江市庐山上，以"味醇、淡泊、色秀、香馨"久负盛名，畅销海内外。'
        },
        {
          name: '武夷岩茶',
          poem: '仙山好茶独韵味，极品贡茶美名扬',
          description: '主要产自福建省武夷山地区，其茶品质优异，以"香久益清，味久益醇"著称，是中国乌龙茶中的极品。'
        },
        {
          name: '黄山毛峰',
          poem: '中原名茶举世闻',
          description: '主要产于安徽黄山等地，该茶因口感微妙、银芽显露、芽尖似峰而得名，风味独特。'
        },
        // {
        //   name: '六安瓜片',
        //   poem: '',
        //   description: '主要产于安徽省六安市，自清朝被列为贡品茶，该茶经评鉴至毕，汤色碧绿明亮，具有淡淡清香，是绿茶之经典。'
        // },
        {
          name: '信阳毛尖',
          poem: '',
          description: '主要产于河南省信阳市，品质优异，以"细圆挺直、光滑多毫、味浓香高、汤色碧绿"而享誉中外。'
        }
      ]
    }
  },
  mounted() {
    this.drawTimeline();
  },
  methods: {
    drawTimeline() {
      const canvas = document.getElementById('tea-history-timeline');
      const ctx = canvas.getContext('2d');

      // 绘制时间轴
      ctx.beginPath();
      ctx.strokeStyle = '#fff';
      ctx.lineWidth = 2;
      ctx.moveTo(50, 50);
      ctx.lineTo(50, 550);
      ctx.stroke();

      // 定义时间点数据
      const timePoints = [
        { year: '公元前2737年', event: '神农尝百草发现茶' },
        { year: '西汉', event: '茶开始商业化种植' },
        { year: '唐代', event: '茶文化繁荣，茶传入日本' },
        { year: '宋代', event: '斗茶之风盛行' },
        { year: '明清', event: '六大茶类基本形成' }
      ];

      const yStep = (550 - 50) / (timePoints.length + 1);
      timePoints.forEach((point, index) => {
        const y = 50 + (index + 1) * yStep;

        // 绘制时间点圆圈
        ctx.beginPath();
        ctx.fillStyle = '#00FFFF';
        ctx.arc(50, y, 5, 0, 2 * Math.PI);
        ctx.fill();

        // 绘制时间点文字
        ctx.font = '12px Arial';
        ctx.fillStyle = '#fff';
        ctx.fillText(point.year, 60, y + 5);
        ctx.fillText(point.event, 60, y + 20);
      });
    },
    goBack() {
      this.$router.back()
    }
  }
};
</script>

<style scoped>
.body-container {
  min-height: 95vh;
  padding: 0px;
  background: linear-gradient(135deg, #1a1f2c 0%, #2d3748 100%);
  color: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  font-family: 'Arial', sans-serif;
}

.title-section {
  margin-top: 5vh; /* 减小顶部外边距，使内容整体上移 */
  margin-bottom: 50px;
  text-align: center;
}

.main-title {
  font-size: 64px;
  font-weight: bold;
  margin: 0 0 20px;
  background: linear-gradient(45deg, #00FFFF, #FF00FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  animation: titleFadeIn 1s ease-in-out;
}

@keyframes titleFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.content-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px; /* 调整容器最大宽度 */
  margin-left: 100px; /* 减小整体右移距离 */
}

.tea-history-container {
  width: 200px;
  margin-bottom: 60px;
  animation: graphFadeIn 1s ease-in-out 0.4s forwards;
  opacity: 0;
  margin-left: -400px; /* 让茶历史容器向左移动 */
}

.tea-categories-container {
  position: relative;
  width: 30%; /* 调整茶类分类容器宽度 */
  max-width: 300px;
  margin-bottom: 60px;
  animation: graphFadeIn 1s ease-in-out 0.4s forwards;
  opacity: 0;
}

.tea-list-container {
  position: relative;
  width: calc(70% - 200px); /* 调整茶列表容器宽度 */
  max-width: 800px;
  margin-bottom: 60px;
  animation: graphFadeIn 1s ease-in-out 0.4s forwards;
  opacity: 0;
}

.subtitle {
  font-size: 28px;
  color: #e6e6e6;
  margin: 0px 0 20px; /* 调整副标题与内容的间距 */
  line-height: 1.8;
  text-align: center;
  animation: subtitleFadeIn 1s ease-in-out 0.2s forwards;
  opacity: 0;
}

@keyframes graphFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tea-cards-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.tea-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 100%);
  border-radius: 50%; /* 改为圆形 */
  width: 180px;
  height: 180px;
  padding: 20px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); /* 减小阴影 */
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

.tea-card:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.3) 100%);
  transform: scale(1.03); /* 减小缩放比例 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.tea-header {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.tea-header h3 {
  color: #00FFFF;
  font-size: 1.2rem; /* 减小字体大小 */
  margin-bottom: 3px; /* 减小外边距 */
}

.tea-poem {
  font-style: italic;
  color: #888;
  font-size: 0.8rem; /* 减小字体大小 */
}

.tea-content p {
  line-height: 1.4; /* 减小行高 */
  font-size: 0.9rem; /* 减小字体大小 */
}

.category-list {
  margin-bottom: 20px;
}

.category-item {
  padding: 10px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 100%);
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.4s ease;
}

.category-item:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.3) 100%);
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.sub-items {
  font-size: 0.8rem;
  color: #666;
  margin-top: 5px;
}

.footer {
  width: 100%;
  text-align: center;
  padding: 10px 0;
  background-color: rgba(0, 0, 0, 0.3);
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2);
  color: #e6e6e6;
  font-size: 16px;
  margin-top: 50px;
  margin-left: 50px; /* 新增，将页脚右移 */
  box-sizing: border-box; /* 确保内边距和边框不影响宽度 */
}

@keyframes subtitleFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.back-button {
  position: fixed;
  top: 20px;
  left: 20px;
  padding: 10px 20px;
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.2) 0%, rgba(0, 255, 255, 0.3) 100%);
  color: #fff;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  z-index: 100;
  font-size: 16px;
}

.back-button:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
</style>
    